<template>
    <a-modal
            title="编辑"
            :visible="loading"
            @ok="handleOk"
            @cancel="handleCancel"

    >
        <!--destroyOnClose="true"-->
            <a-form-model :model="form" ref="editApp" :label-col="labelCol" :wrapper-col="wrapperCol"  :rules="rules">
                <a-form-model-item label="应用名称"   prop="appName">
                    <a-input v-model="form.appName" />
                </a-form-model-item>
                <a-form-model-item label="应用Key"  prop="appKey">
                    <a-input-search
                            enter-button="生成"
                            @search="onSearch"
                            v-model="form.appKey" readOnly/>
                </a-form-model-item>
                <a-form-model-item label="服务信息"  prop="useRecursion">
                    <a-input v-model="form.useRecursion" />
                </a-form-model-item>
                <a-form-model-item label="研发单位"  prop="appRDUnit">
                    <a-input v-model="form.appRDUnit" />
                </a-form-model-item>
                <a-form-model-item label="来源"  prop="appType">
                    <a-select v-model="form.appType" >
                       <a-select-option :value="item.code" v-for="item in typeDict">{{item.label}}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="机构"  prop="gnrlid">
                    <a-select 
                    show-search
                    option-filter-prop="children"
                    :filter-option="filterOption"
                    v-model="form.gnrlid" 
                    >
                        <a-select-option :value="item.gnrlid" v-for="item in orgs">{{item.orgname}}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="描述">
                    <a-input v-model="form.appDesc" type="textarea" />
                </a-form-model-item>
            </a-form-model>
    </a-modal>
</template>
<script>
    import {getOne,saveApp,genKey,orgs} from '@/api/application'
    import {listDict} from '@/api/dict'
    import AInputSearch from 'ant-design-vue/es/input/Search'

    export default {
            name : 'edit',
      components: { AInputSearch },
      data() {
         let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入必填值'));
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.editApp.validateField('checkPass');
        }
        callback();
      }
    };
              return {
                loading: false,
                labelCol: { span: 4 },
                wrapperCol: { span: 14 },
                typeDict: [],
                form: {
                  id: '',
                  appName: '',
                  appType: '',
                  appDesc: '',
                  appRDUnit: '',
                  useRecursion: '',
                  appKey:'',
                  gnrlid: ''
                },
                rules: {
        appName: [{ required: true, validator: validatePass, trigger: 'change' }],
        appType: [{ required: true, validator: validatePass, trigger: 'change' }],
        appRDUnit: [{ required: true, validator: validatePass, trigger: 'change' }],
        appKey: [{ required: true, validator: validatePass, trigger: 'change' }],
        useRecursion: [{ required: true, validator: validatePass, trigger: 'change' }],
        gnrlid: [{ required: true, validator: validatePass, trigger: 'change' }],
      },
                orgs: []
              };
            },
            mounted(){
              this.getType()
            },
            methods: {
              filterOption(input,option){
return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
              },
              getOrgs(){
                orgs().then(response => {
                  this.orgs = response.data
                  console.log(response.data)
                })
              },
              onSearch(){
                genKey().then(response => {
                  this.form.appKey = response.data
                })
              },
              getOne(id){
                getOne(id).then(res => {
                  this.form = res.data
                })
              },
              handleOk(){
                const _this = this;
                _this.$refs['editApp'].validate(valid => {
                  console.log(valid)
            if (valid) {
                saveApp(_this.form).then(res => {
                  _this.$message.success(res.message)
                  _this.loading = false
                  _this.clearForm()
                  _this.$parent.initData();
                })
                } else {
          console.log('error submit!!');
        }
        });
              },
                 getType(){
           listDict({label:'APP'}).then(response => {
              this.typeDict = response.data.content[0].children
             console.log(this.typeDict)
           })
         },
              handleCancel(){
                this.loading = false
                this.clearForm()
              },
              clearForm(){
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
                // this.$refs['editApp'].resetFields()
              }
            },
          };
        </script>

